<template>
  <div class="tab">
   <div class="tab_item" v-for="(item ,index) in tabBarImg" :key="index" @click="switchToTab(item.path)">
     <img :src="$route.path === item.path ? item.icon : item.normal" alt="">
     <span :class="$route.path === item.path ? 'active' : ''">{{item.title}}</span>
   </div>
 </div>
</template>
 
<script>
export default {
    name: "Tabbar",
    data(){
      return{
        tabBarImg:[
          {
            path:'/home',
            normal:require('./../assets/img/tabbar/tabbar_1.png'),
            icon:require('./../assets/img/tabbar/a_tabbar_1.png'),
            title:'首页'
          },
          {
            path:'/money',
            normal:require('./../assets/img/tabbar/tabbar_2.png'),
            icon:require('./../assets/img/tabbar/a_tabbar_2.png'),
            title:'财富'
          },
          {
            path:'/koubei',
            normal:require('./../assets/img/tabbar/tabbar_3.png'),
            icon:require('./../assets/img/tabbar/a_tabbar_3.png'),
            title:'口碑'
          },
          {
            path:'/friend',
            normal:require('./../assets/img/tabbar/tabbar_4.png'),
            icon:require('./../assets/img/tabbar/a_tabbar_4.png'),
            title:'朋友'
          },
          {
            path:'/',
            normal:require('./../assets/img/tabbar/tabbar_5.png'),
            icon:require('./../assets/img/tabbar/a_tabbar_5.png'),
            title:'我的'
          },
        ]
      }
    },
    methods:{
      switchToTab(path){
        this.$router.replace(path);
      }
    }
  }
</script>
<style lang="less" scoped>
.tab {
  display: flex;
  position: fixed;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
  height: 50px;
  border-top: 1px solid #f6f6f6;
  bottom: 0;
  background-color: #fff;
  .tab_item{
    text-align: center;
  }
  img {
    width: 20px;
    height: 20px;
  }
  span {
    display: block;
    width: 100%;
    font-size: 12px;
    text-align: center;
  }
}
</style>